<script setup lang="ts">
  import { reactive, computed, inject, ref } from 'vue';
  import { Button, Input, InputPassword, Form, FormItem } from '@arco-design/web-vue';
  import { useWalletSignature, useWalletConnect } from './hooks';
  import { useUserStore } from '/@/store/modules/user';
  import { UserConnectContext, UserConnectModal } from './context';
  import type { UserConnectContextType, UserConnectModalType } from './context';

  const userConnectModal = inject<UserConnectModalType | null>(UserConnectModal, null);
  const userStore = useUserStore();
  const userContext = inject<UserConnectContextType | null>(UserConnectContext, null);
  const form = reactive({
    email: 'user@polestar.com',
    password: '123456',
  });
  const {
    data: addressRef,
    execute: connect,
    isLoading: isLoadingByConnectRef,
  } = useWalletConnect();
  const {
    signature: signatureRef,
    message: messageRef,
    execute: sign,
    isLoading: isLoadingBySignRef,
  } = useWalletSignature({ address: addressRef });
  const isLoadingByEmailLoginRef = ref(false);
  const isLoadingByWalletLoginRef = ref(false);
  const getIsLoadingByWallet = computed(
    () =>
      isLoadingByConnectRef.value || isLoadingBySignRef.value || isLoadingByWalletLoginRef.value,
  );

  async function loginByEmail() {
    isLoadingByEmailLoginRef.value = true;
    try {
      await userStore.login({
        email: form.email,
        password: form.password,
      });
      userConnectModal?.actions.changeVisible(false);
    } finally {
      isLoadingByEmailLoginRef.value = false;
    }
  }

  function handleSubmit(data) {
    console.log(data);
  }

  async function loginByWallet() {
    if (userStore.token) {
      userStore.afterLoginAction();
      return;
    }
    await connect();
    await sign();
    if (addressRef.value && signatureRef.value) {
      isLoadingByWalletLoginRef.value = true;
      try {
        await userStore.login({
          address: addressRef.value,
          sign: signatureRef.value,
          message: messageRef.value,
        });

        userConnectModal?.actions.changeVisible(false);
      } finally {
        isLoadingByWalletLoginRef.value = false;
      }
    }
  }
</script>
<template>
  <div class="text-blank text-[32px] text-center font-bold">登录</div>
  <Form :model="form" @submit="handleSubmit" layout="vertical">
    <FormItem field="email" label="邮箱">
      <Input placeholder="请输入你的邮箱" v-model="form.email" />
    </FormItem>
    <FormItem field="password" label="密码">
      <InputPassword placeholder="请输入你的密码" v-model="form.password" />
    </FormItem>
    <div
      class="mt-[10px] text-right text-[#5F70FF] text-[14px] cursor-pointer"
      @click="userContext?.actions.jumpToForgotPassword"
      >忘记密码?</div
    >
    <div>
      <Button
        class="mt-[18px] h-[60px]"
        type="primary"
        @click="loginByEmail"
        long
        :loading="isLoadingByEmailLoginRef"
        :disabled="isLoadingByEmailLoginRef"
        >登录</Button
      >
    </div>
    <div class="mt-[24px] text-center text-[14px]">
      还没有账号？
      <span class="text-[#5F70FF] cursor-pointer" @click="userContext?.actions.jumpToEmailRegister">
        去注册
      </span>
    </div>
    <div class="mt-[14px] text-center text-[14px]">或者</div>
    <div class="mt-[20px]">
      <Button
        class="h-[48px]"
        type="primary"
        long
        @click="loginByWallet"
        :loading="getIsLoadingByWallet"
        :disabled="getIsLoadingByWallet"
        >MetaMask</Button
      >
    </div>
  </Form>
</template>
